<template>
	<div class="decorate">
		<!-- 标题 -->
		<h2>页面设置</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<div class="title">系统设置</div>
					<el-form label-width="80px">
						<el-form-item label="系统风格">
							<el-select v-model="datas.theme" clearable placeholder="Select" style="width: 100%">
								<el-option v-for="item in themes" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>

						<el-form-item label="系统主题">
							<el-select v-model="datas.mode" clearable placeholder="Select" style="width: 100%">
								<el-option v-for="item in modes" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>

						<!-- 高度 -->
						<el-form-item label="字体大小">
							<el-slider v-model="datas.fontSize" :max="100" :min="10" show-input> </el-slider>
						</el-form-item>

						<!-- 背景颜色 -->
						<!--						<el-form-item label="背景颜色">-->
						<!--							<el-input v-model="datas.bgColor">-->
						<!--								<template #prepend>-->
						<!--									<el-color-picker v-model="datas.bgColor" />-->
						<!--								</template>-->
						<!--							</el-input>-->
						<!--						</el-form-item>-->

						<!--						<el-form-item label="背景图片">-->
						<!--							<div class="sd-flex">-->
						<!--								<div class="choice-image choice-image-delete" @click="openFileChoiceDialog">-->
						<!--									<el-image v-if="datas.bgImg != ''" :src="STATIC_URL + datas.bgImg" fit="cover" class="cover-image" />-->
						<!--									<el-icon v-else>-->
						<!--										<ele-Plus />-->
						<!--									</el-icon>-->
						<!--									<div class="delete-content" @click.stop="datas.bgImg = ''" v-if="datas.bgImg != ''">-->
						<!--										<SvgIcon name="ele-DeleteFilled"></SvgIcon>-->
						<!--									</div>-->
						<!--								</div>-->
						<!--							</div>-->
						<!--						</el-form-item>-->
					</el-form>
				</div>
			</el-tab-pane>

			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<!-- 表单 -->
		<!-- 上传图片 -->
		<!-- <uploadimg ref="upload" @uploadInformation="uploadInformation" /> -->

		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
	</div>
</template>

<script setup name="setting">
import { defineAsyncComponent, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();

const themes = [
	{
		value: 'yellow',
		label: '金黄',
	},
	{
		value: 'orange',
		label: '橘黄',
	},
	{
		value: 'green',
		label: '深绿',
	},
];

const modes = [
	{
		value: 'light',
		label: '清新型',
	},
	{
		value: 'dark',
		label: '深黑型',
	},
];
const props = defineProps({
	datas: {},
});

const choiceFile = (res) => {
	props.datas.bgImg = res[0].visitRelativePath;
};

const openFileChoiceDialog = () => {
	FileChoiceRef.value.openFileChoiceDialog();
};
</script>

<style scoped lang="scss">
/* 页面设置 */
.decorate {
	width: 100%;
	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
